<template>
	<view>
		<view class="send" :style="{'height':sendHeight + 'rpx'}">
			<view class="send-row">
				<!--语音切换-->
				<image v-if="isEdit" @tap="toggleEdit(false)" src="../static/img/send/voice.svg" class="icon">
				</image>
				<image v-else @tap="toggleEdit(true)" src="../static/img/send/keyboard.svg" class="icon"></image>
				<!--语音切换-->
				<!-- <form @submit="submitInput">
				</form> -->
				<input v-if="isEdit" @focus="onInputFocus" :focus="isFocus" :cursor-spacing="40"
					:adjust-position="isAdjustPosition" confirm-type="send" cursor-spacing="40" @confirm="sendClick"
					@input="textareaBInput" v-model="content" class="input" placeholder="请文明发言..." />

				<view v-else @touchstart="micTouchStart" @touchmove="micTouchMove" @touchcancel="micTouchCancel"
					@touchend="micTouchEnd" class="input" style="text-align: center;">
					按住开吼
				</view>

				<!--表情-->
				<image @tap="togglePicker(200, 'emoji')" src="../static/img/send/emoji.svg" class="icon"></image>
				<!--发送-->
				<view @touchend.prevent="sendClick" v-if="isShowSendBtn" class="btn">发送</view>
				<!--附件-->
				<image @tap="togglePicker(150, 'file')" v-else src="../static/img/send/add.svg" class="icon">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chat-send",
		data() {
			return {
				content: '',
				cursorSpacing: 20,
				isShowSendBtn: true,
				isEdit: true,
				isAdjustPosition: false,
				isFocus: false,
				sendHeight: 110,

				isShow: false
			};
		},
		mounted() {

		},
		methods: {
			onInputFocus() {

			},
			sendClick() {
				if (!this.content.length) return;
				this.$emit('send', this.content);
				this.content = '';
			},

			togglePicker() {
				this.isShow = !this.isShow
				if (this.isShow) {
					this.sendHeight = 330
				} else {
					this.sendHeight = 110
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	//3，输入框
	.send {
		// display: flex;
		// flex-direction: row;
		// align-items: center;
		// justify-content: space-between;
		transition: all 0.2s ease;
		position: relative;
		width: 100%;
		// height: 220rpx;
		background-color: #eee;
		// z-index: -99;
		// background-color: red;
	}

	.send-new-msg {
		position: absolute;
		z-index: 9;
		top: -80rpx;
		right: 30rpx;
		width: fit-content;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		background-color: #333;
		border-radius: 10rpx;
		font-size: 28rpx;
		transition: all .3s ease-in-out;

		text {
			color: #fff;
		}

		&:before {
			content: '';
			border-width: 5px;
			border-style: solid;
			border-color: #333 transparent transparent transparent;
			position: absolute;
			bottom: 100%;
			top: 60rpx;
			left: 50%;
			margin-left: -5px;
		}
	}


	.send-row {
		width: 100%;
		height: 110rpx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-top: 2upx solid #EEE;
		border-bottom: 2upx solid #EEE;
		background: #fff;
		// background-color: red;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		/* -webkit-overflow-scrolling: auto !important;
			overflow-scrolling: auto !important; */

		.input {
			height: 80upx;
			line-height: 80upx;
			padding: 0 30upx;
			font-size: 34upx;
			border-radius: 60upx;
			background-color: #fff;
			width: calc(100% - 120upx - 20upx - 40upx - 60upx);
			background-color: #FAFAFA;
			margin: 0 10rpx;
		}

		.icon {
			width: 60upx;
			height: 60upx;
			margin: 0 7rpx;
		}

		.btn {
			color: #fff;
			width: 120rpx;
			height: 65rpx;
			font-size: 24rpx;
			line-height: 65rpx;
			text-align: center;
			border-radius: 35rpx;
			background: linear-gradient(to right, #f09b37, #eb632c);
		}
	}
</style>